<script setup>
import * as Cesium from 'cesium'
import { defineProps, ref } from 'vue'


const props = defineProps({
  viewer: {
    type: Object,
    required: true
  }
})

const switchTo2D = () => {
  props.viewer.scene.morphTo2D()
}
const switchTo3D = () => {
  props.viewer.scene.morphTo3D()
}

const Location = () => {
  const destination = Cesium.Cartesian3.fromDegrees(102.81, 37.18, 9000); // 经度、纬度、高度
  props.viewer.camera.flyTo({
    destination: destination, // 终点坐标
    duration: 1, // 飞行时间
    orientation: {
      pitch: Cesium.Math.toRadians(-85), // 俯仰角度
      heading: Cesium.Math.toRadians(0)
    }
  });
}
</script>
<template>
  <el-row class="mapButton">
    <el-button @click="switchTo2D">2D</el-button>
    <el-button @click="switchTo3D">3D</el-button>
    <el-button @click="Location">复位</el-button>
  </el-row>
</template>
<style scoped>
.mapButton {
  position: absolute;
  z-index: 1;
  top: 80px;
  right: 20%;

  .el-button {
    background-color: #000;
    color: #4ADE80;
    border: 1px solid #4ADE80;
    border-radius: 4px;
  }

  .el-button:hover {
    background-color: #4ADE80;
    color: #000;
    border: 1px solid #4ADE80;
  }
}
</style>
